<!DOCTYPE html>
<html lang="en-us">
  <head>
    
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.54.0 with theme Tranquilpeak 0.4.3-SNAPSHOT">
<meta name="author" content="Lyne (PHPer/Beatboxer)">
<meta name="keywords" content="">
<meta name="description" content="My personal blog">


<meta property="og:description" content="My personal blog">
<meta property="og:type" content="website">
<meta property="og:title" content="Beatboxes">
<meta name="twitter:title" content="Beatboxes">
<meta property="og:url" content="https://lyne007.github.io/beatbox/">
<meta property="twitter:url" content="https://lyne007.github.io/beatbox/">
<meta property="og:site_name" content="Lyne PHPer/Beatboxer">
<meta property="og:description" content="My personal blog">
<meta name="twitter:description" content="My personal blog">
<meta property="og:locale" content="en-us">


<meta name="twitter:card" content="summary">











  <meta property="og:image" content="https://avatars0.githubusercontent.com/u/28702327?s=460&v=4">
  <meta property="twitter:image" content="https://avatars0.githubusercontent.com/u/28702327?s=460&v=4">


    <title>Beatboxes</title>

    <link rel="icon" href="https://lyne007.github.io/favicon.png">
    
      <link rel="alternate" type="application/rss+xml" title="RSS" href="https://lyne007.github.io/beatbox/index.xml">
    

    

    <link rel="canonical" href="https://lyne007.github.io/beatbox/">

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css" integrity="sha256-vuXZ9LGmmwtjqFX1F+EKin1ThZMub58gKULUyf0qECk=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.css" integrity="sha256-SEa4XYAHihTcEP1f5gARTB2K26Uk8PsndQYHQC1f4jU=" crossorigin="anonymous" />
    
    
    <link rel="stylesheet" href="https://lyne007.github.io/css/style-nnm2spxvve8onlujjlegkkytaehyadd4ksxc1hyzzq9a2wvtrgbljqyulomn.min.css" />
    
    

    
      
    
    
  </head>

  <body>
    <div id="blog">
      <header id="header" data-behavior="1">
  <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
  <div class="header-title">
    <a class="header-title-link" href="https://lyne007.github.io/">Lyne PHPer/Beatboxer</a>
  </div>
  
    
      <a class="header-right-picture "
         href="https://lyne007.github.io/#about">
    
    
    
      
        <img class="header-picture" src="https://avatars0.githubusercontent.com/u/28702327?s=460&amp;v=4" alt="Author&#39;s picture" />
      
    
    </a>
  
</header>

      <nav id="sidebar" data-behavior="1">
  <div class="sidebar-container">
    
      <div class="sidebar-profile">
        <a href="https://lyne007.github.io/#about">
          <img class="sidebar-profile-picture" src="https://avatars0.githubusercontent.com/u/28702327?s=460&amp;v=4" alt="Author&#39;s picture" />
        </a>
        <h4 class="sidebar-profile-name">Lyne (PHPer/Beatboxer)</h4>
        
          <h5 class="sidebar-profile-bio">我会虾B~ B~ !.</h5>
        
      </div>
    
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://lyne007.github.io/">
    
      <i class="sidebar-button-icon fa fa-lg fa-home"></i>
      
      <span class="sidebar-button-desc">首页</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://lyne007.github.io/categories">
    
      <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
      
      <span class="sidebar-button-desc">分类</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://lyne007.github.io/archives">
    
      <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
      
      <span class="sidebar-button-desc">Archives</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://github.com/kakawait" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-github"></i>
      
      <span class="sidebar-button-desc">GitHub</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://www.facebook.com/lyne007/lyne007.php?u=%25s" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-facebook-official"></i>
      
      <span class="sidebar-button-desc">Facebook</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://lyne007.github.io/index.xml">
    
      <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
      
      <span class="sidebar-button-desc">RSS</span>
    </a>
  </li>


    </ul>
  </div>
</nav>

      

      <div id="main" data-behavior="1"
        class="
               hasCoverMetaIn
               ">
        <section class="postShorten-group main-content-wrap">
          
          
          

        </section>
        <footer id="footer" class="main-content-wrap">
  <span class="copyrights">
    &copy; 2019 <a href="https://github.com/lyne007">lyne007</a>. All Rights Reserved
  </span>
</footer>

      </div>
    </div>
    
    <div id="about">
  <div id="about-card">
    <div id="about-btn-close">
      <i class="fa fa-remove"></i>
    </div>
    
      <img id="about-card-picture" src="https://avatars0.githubusercontent.com/u/28702327?s=460&amp;v=4" alt="Author&#39;s picture" />
    
    <h4 id="about-card-name">Lyne (PHPer/Beatboxer)</h4>
    
      <div id="about-card-bio">我会虾B~ B~ !.</div>
    
    
      <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        CSDN, Lyne007
      </div>
    
    
      <div id="about-card-location">
        <i class="fa fa-map-marker"></i>
        <br/>
        ShangHai, CHN
      </div>
    
  </div>
</div>

    <div id="algolia-search-modal" class="modal-container">
  <div class="modal">
    <div class="modal-header">
      <span class="close-button"><i class="fa fa-close"></i></span>
      <a href="https://algolia.com" target="_blank" rel="noopener" class="searchby-algolia text-color-light link-unstyled">
        <span class="searchby-algolia-text text-color-light text-small">by</span>
        <img class="searchby-algolia-logo" src="https://www.algolia.com/static_assets/images/press/downloads/algolia-light.svg">
      </a>
      <i class="search-icon fa fa-search"></i>
      <form id="algolia-search-form">
        <input type="text" id="algolia-search-input" name="search"
          class="form-control input--large search-input" placeholder="Search" />
      </form>
    </div>
    <div class="modal-body">
      <div class="no-result text-color-light text-center">no post found</div>
      <div class="results">
        
        
          <div class="media">
            
            <div class="media-body">
              <a class="link-unstyled" href="https://lyne007.github.io/2019/03/hugo/">
                <h3 class="media-heading">嵌入代码段示例</h3>
              </a>
              <span class="media-meta">
                <span class="media-date text-small">
                  Mar 3, 2019
                </span>
              </span>
              <div class="media-content hide-xs font-merryweather">Tabbed code block  tabbed_codeblock js css html      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  function $initHighlight(block, flags) { try { if (block.className.search(/\bno\-highlight\b/) != -1) return processBlock(block.function, true, 0x0F) &#43; &#39; class=&#34;&#34;&#39;; } catch (e) { /* handle exception */ var e4x = &lt;div&gt;Example &lt;p&gt;1234&lt;/p&gt;&lt;/div&gt;; } for (var i = 0 / 2; i &lt; classes.</div>
            </div>
            <div style="clear:both;"></div>
            <hr>
          </div>
        
      </div>
    </div>
    <div class="modal-footer">
      <p class="results-count text-medium"
         data-message-zero="no post found"
         data-message-one="1 post found"
         data-message-other="{n} posts found">
         1 posts found
      </p>
    </div>
  </div>
</div>
    
  
    
    <div id="cover" style="background-image:url('https://lyne007.github.io/images/cover.jpg');"></div>
  


    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js" integrity="sha256-GEAnjcTqVP+vBp3SSc8bEDQqvWAZMiHyUSIorrWwH50=" crossorigin="anonymous"></script>


<script src="https://lyne007.github.io/js/script-qi9wbxp2ya2j6p7wx1i6tgavftewndznf4v0hy2gvivk1rxgc3lm7njqb6bz.min.js"></script>


<script lang="javascript">
window.onload = updateMinWidth;
window.onresize = updateMinWidth;
document.getElementById("sidebar").addEventListener("transitionend", updateMinWidth);
function updateMinWidth() {
  var sidebar = document.getElementById("sidebar");
  var main = document.getElementById("main");
  main.style.minWidth = "";
  var w1 = getComputedStyle(main).getPropertyValue("min-width");
  var w2 = getComputedStyle(sidebar).getPropertyValue("width");
  var w3 = getComputedStyle(sidebar).getPropertyValue("left");
  main.style.minWidth = `calc(${w1} - ${w2} - ${w3})`;
}
</script>

<script>
$(document).ready(function() {
  hljs.configure({ classPrefix: '', useBR: false });
  $('pre.code-highlight > code, pre > code').each(function(i, block) {
    if (!$(this).hasClass('codeblock')) {
      $(this).addClass('codeblock');
    }
    hljs.highlightBlock(block);
  });
});
</script>





    
  </body>
</html>

